
$(()=>{
    new Vue({
        el:'#mycart',
        data:{
            name:'hanley',
            age:18,
            myitem:'',
            uncount:0,
            arr:['a','b','c','d'],
            carts:[{item:'Apple',qty:1,payflg:false},
            {item:'Huawei',qty:2,payflg:false},
            {item:'Mi8',qty:5,payflg:false},
            {item:'OPPO',qty:1,payflg:true}]
        },
        mounted:function(){
            this.changeList();
        },
        methods:{
            add:function(itemName){
                if(itemName == '') return;
                this.carts.unshift({item:itemName,qty:1,payflg:false});
                this.changeList();
            },
            del:function(index){
                this.carts.splice(index,1);
            },
            changeList: function(){

                //this.uncount = this.carts.filter( item => !item.payflg).length;

                let _uncount = 0;
                this.carts.forEach((element,index) => {
                    if(!element.payflg){
                        _uncount++;
                    }
                });
                this.uncount = _uncount ;
            }
        },
        filters:{
            payFilter:function(val){
                switch(val){
                    case true:
                        return '已支付';
                    case false:
                        return '未支付';
                    default:
                        return '未知';
                }
            }
        }
    });
});